<template>
  <div class="cp-nums-basket" v-show="pageVisible">
    <div class="top-bar">
      <div class="pull-left" style="width: 1.9em" @click="closeThisPage">
        <i class="fa fa-chevron-left "></i>
      </div>
      <span style="margin-left: -2.5em">号码篮</span>
    </div>
    <div class="cp-nums-basket-jixuan">
      <div class="cp-nums-basket-xuanhao" @click="jixuan(1)"><i class="fa fa-plus"></i> 机选1注</div>
      <div class="cp-nums-basket-xuanhao" @click="jixuan(3)"><i class="fa fa-plus"></i> 机选3注</div>
      <div class="cp-nums-basket-xuanhao" @click="closeThisPage"><i class="fa fa-plus"></i> 继续选号</div>
    </div>
    <div class="cp-nums-basket-choosed" v-show="numsShow">
      <ul class="cp-nums-basket-ul">
          <li  v-for="jx in jixuanNums">
            <div class="nums-jixuan-money">
              机选5个号码：
              <div class="num-ball-jx" v-for="n in jx">
                {{n}}
              </div>
              <div class="delete" @click="deleteThis(jx)">
                <i class="fa fa-minus-circle"></i>
              </div>
            </div>
          </li>
            <div class="nums-jixuan-icon">
              <div>
              <i class="fa fa-square-o"></i>
              追号
              </div>
              <div class="clear-jx" @click="clearAllJx">
              <i class="fa fa-trash-o"></i>
                清空
              </div>
            </div>

      </ul>
    </div>

    <div class="cp-nums-basket-bottom">

    </div>
  </div>

</template>

<script>
  import {ramdomNums} from '../utils/clsUtil'

  export default {
    name: 'cp-nums-basket',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
//        pageVisible:false,
        numsShow:false,
        jixuanNums:[],
      }
    },
    props:{
      pageVisible:{
        type:Boolean,
        default:false
      }
    },
    methods: {
      closeThisPage:function () {
        this.pageVisible=false;
        this.$emit("close-basket-page",false);
      },
      jixuan(num){
        this.numsShow = true;
        var selectNums = [];
        if(this.jixuanNums.length!=0){
          $.each(this.jixuanNums,function (j,obj) {
            selectNums.push(obj);
          })
        }
        for (var i=0;i<num;i++){
          selectNums.push(ramdomNums(5))
        }
        this.jixuanNums = selectNums;
      },
      clearAllJx(){
        this.jixuanNums =[];
        this.numsShow = false;
      },
      deleteThis(nums){
        var selectNums = [];
        if(this.jixuanNums.length!=0){
          $.each(this.jixuanNums,function (j,obj) {
            if(obj!=nums){
              selectNums.push(obj);
            }
          })
        }
        this.jixuanNums = selectNums;
//        console.log(typeof this.jixuanNums)
      }

    },
    watch:{
      jixuanNums(v){
        if(v.length==0||v==undefined){
          this.numsShow = false;
        }

      }
    }

  }
</script>

<style>
  .cp-nums-basket{
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    height: 100%;
    background: #faf9f2;
    z-index: 1503;
    min-height: 100%;
    overflow: auto;
  }
  .cp-nums-basket .top-bar{
    position: fixed;
    top: 0;
    z-index: 1504;
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    font-size: 1.5em;
    text-align: center;
    color: #fff;
    background: #dc3b40;
    background: linear-gradient(180deg,#dc3b40 2%,#dc3b40 50%,#db3b40 51%,#d7363b);
    background: -webkit-linear-gradient(bottom,#dc3b40 2%,#dc3b40 50%,#db3b40 51%,#d7363b);
  }
  .cp-nums-basket-jixuan{
    position: relative;
    top:1rem;
    display: inline-flex;
    text-align: center;
    padding: .4em .8em;
    box-shadow: 0 0 0.6em #b9b9b9;
    z-index: 99;
    background: #f9f8f0;
    left: 0;
    width: 100%;
  }
  .cp-nums-basket-xuanhao{
    display: inline-block;
    color: #333;
    border: 1px solid #d2d2d2;
    border-radius: .3em;
    height: 0.75rem;
    width: 33%;
    font-size: 1.3em;
    line-height: 0.75rem;
    background: #fff;
  }
  .cp-nums-basket-choosed{
    box-shadow: 0 0 0.5em #ccc;
    margin: 0 .9em;
    background: #fff;
    position: relative;
    top: 1rem;
    border-bottom: dotted 2px #ffffff;
    margin-bottom: 1.1rem;
  }
  .nums-jixuan-icon div{
    width: 50%;
    text-align: center;
    font-size: 1.4em;
    color: #707070;
  }
  .nums-jixuan-icon{
    height: 4em;
    line-height: 4em;
    display: -webkit-box;
  }
  .cp-nums-basket-ul{

  }
  .num-ball-jx{
    background-color: #b2b2b2;
    width: 1.6em;
    color: azure;
    height: 1.6em;
    line-height: 1.6em;
    text-align: center;
    font-size: 1.4em;
    margin-left: 0.3em;
    border-radius: 50%;
    display: inline-block;
  }
  .cp-nums-basket-ul li{
    border-bottom: dotted 1px #000000 ;
  }

  .nums-jixuan-money {
    padding: 1em;
  }
  .delete{
    display: inherit;
    font-size: 2em;
    color: red;
    float: right;
  }
  .cp-nums-basket-bottom{
    height: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #dc3b40;
  }
</style>
